<template>
  <Card>
    <Statistic
      :title="title"
      :value="statisticValue"
      :precision="2"
      :value-style="{ color: '#3f8600' }"
      style="margin-right: 50px; height: 150px"
    />
  </Card>
</template>

<script lang="ts">
import { Card, Statistic } from 'ant-design-vue';
import { defineComponent, onMounted, ref, watch } from 'vue';
import { singleMetricMap } from '../apm.data';
import { getSingleMetricsValues } from '/@/api/maintenance-center/skywalking/dashboard/apm';
import { QueryMetricsConditionReq } from '/@/api/maintenance-center/skywalking/dashboard/model/apmModel';
/* eslint-disable */
export default defineComponent({
  components: {
    Card,
    Statistic,
  },
  props: {
    page: String,
    conditionName: String,
    serviceName: String,
    start: String,
    end: String,
    step: String,
  },
  setup(props, { emit }) {
    const statisticValue = ref(0);

    const title = ref(singleMetricMap[props.page][props.conditionName].title);

    watch(
      () => [
        props.page,
        props.conditionName,
        props.start,
        props.end,
        props.step,
        props.serviceName,
      ],
      (val, prevVal) => {
        console.log('StatisticCard 子组件监听父组件值变化：', val);

        let serviceName = val[5];
        let isServiceNameUndefined =
          serviceName == '' || serviceName == null || serviceName == undefined;

        if (!ifDateUndefined(val[1], val[2], val[3]) && !isServiceNameUndefined) {
          let page = val[0];
          let conditionName = val[1];

          let queryMetricsConditionReq: QueryMetricsConditionReq = {
            condition: {
              name: conditionName,
              entity: {
                scope: singleMetricMap[props.page][conditionName].scope,
                serviceName: serviceName,
                normal: true,
              },
            },
            duration: {
              start: val[2],
              end: val[3],
              step: val[4],
            },
          };

          console.log('StatisticCard 子组件监听 请求参数为：', queryMetricsConditionReq);
          getSingleMetricsValues(queryMetricsConditionReq).then((res) => {
            if (conditionName === 'service_apdex') {
              statisticValue.value = res / 10000;
            } else if (conditionName === 'service_sla') {
              statisticValue.value = res / 100;
            } else {
              statisticValue.value = res;
            }
          });
        }
      },
      { immediate: true, deep: true }
    );

    function ifDateUndefined(start: string, end: string, step: string) {
      let isStartUndefined = start == '' || start == null || start == undefined;
      let isEndUndefined = end == '' || end == null || end == undefined;
      let isStepUndefined = step == '' || step == null || step == undefined;
      if (isStartUndefined || isEndUndefined || isStepUndefined) {
        return true;
      }
      return false;
    }

    onMounted(() => {});

    return {
      props,
      title,
      statisticValue,
    };
  },
});
</script>

<style lang="less" scoped>
.statistic-list {
  height: 330px;
  overflow-y: scroll;
}
</style>
